<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>竹里馆民宿登录</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/front/css/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style type="text/css">
.error {
	color: RED;
	font-size: 12px;
}

.success {
	color: green;
	font-size: 12px;
}
</style>
<body
	background="${pageContext.request.contextPath}/front/images/background_login.jpg"
	style="background-attachment: fixed; background-size: 100%">
	<section id="content">
		<!--头部-->
		<div class="content-header clearfix">
			<a href="javascript:;" class="current">用户登录</a>
		</div>
		<!--内容-->
		<div class="content-body">
			<div class="dom" style="display: block;">
				<form
					action="${pageContext.request.contextPath}/RegisterAndLoginServlet" method="post">
					<!--  隐藏域 -->
					<input type="hidden" name="op" value="login">
					<div class="s1">
						<h4>账号</h4>
						<input name="userName" id="userName" type="text" placeholder="用户名">
						<label id="userNameTip" style="padding-left:0px"></label>
					</div>
					<div class="s1">
						<h4>密码</h4>
						<input name="userPwd" id="userPwd" type="password" placeholder="请输入密码">
					</div>
					<div class="s1 msg-code">
						<h4>验证码</h4>
						<!-- size="10" maxlength="10" -->
						<input type="text" id="checkCode" name="code" style="width:300px" id="code"/> 
						<div style="float:right;clear:both;maring:12px 0px 0px 0px;">
						<img id="imgObj" style="text-align:center;" alt="看不清,换一张" src="${pageContext.request.contextPath}/GetCodeServlet" onclick="change(this)">
						</div>
						<label id="codeTip" style="padding-left:0px"></label> 
					</div>
					<div class="s2">
						<input type="checkbox" name="rememberPassword"value="rememberPassword"> 
						<span>记住密码</span>
					</div>
					<input type="submit" class="btn" id="login" value="登&nbsp;录">
				</form>
				<div class="dom-footer">
					<div class="login-another">
						<span>还没有注册帐号?</span> 
						<a href="${pageContext.request.contextPath}/front/register.jsp">立即注册</a>
					</div>
				</div>
			</div>
		</div>
	</section>
</body>
<!-- 地址中的t参数强烈建议设置为分钟级别时间戳，避免该文件被浏览器长时间缓存 -->
<script
	src="${pageContext.request.contextPath}/front/js/jquery-3.2.1.js"></script>
<script>
	// 如果登录失败会弹出一个提示框
	var loginErrorMessage = "${param.loginErrorMessage}"; // ${param.参数名} EL表达式获取页面参数值
	if (loginErrorMessage != "") {
		alert("用户名或密码错误,请重新登录!");
	}
</script>
<script type="text/javascript">
	$(document).ready(function() {
		// 对用户名输入框做失去焦点事件，当输入完后，判断cookie中是否存在该工号对应的name，如果有则返回value
		$("#userName").blur(function() {
			// 获取用户名
			var userName = $(this).val().trim();
			// 发送ajax判断数据库是否存在此用户
			$.ajax({
				async:true,
				url:"${pageContext.request.contextPath}/RegisterAndLoginServlet",
				type:"GET",
				data:{op:"existsOfuserName",userName:userName},
				dataType:"text",
				success:function(result,status,xhr){
					if(result=="true"){ // 用户名存在
						$("#userNameTip").text("正确的账号");
						$("#userNameTip").addClass("success");
						// 注册按钮设置可用
						$("#register").prop("disabled",false);
					}else if(result=="false"){// 用户名不存在
						$("#userNameTip").text("没有该用户");
						$("#userNameTip").addClass("error");
						// 注册按钮设置不可用
						$("#register").prop("disabled",true);
					}
							
				},
				error:function(xhr,status,error){
					alert("ajax异步请求失败");
				}
			});
			// 获取cookie指定name的value值
			var userPassword = getCookie(userName);// 登录账号是cookie中的name
			// 获取成功
			if (userPassword != "") {
				// 填充数据
				$("#userPwd").val(userPassword);
				$("input[name='rememberPassword']").prop("checked", true);
			} else {
				$("#userPwd").val("");
				$("input[name='rememberPassword']").prop("checked", false);
			}
		});
		
		// 对验证码输入框绑定失去焦点事件
		$("#checkCode").blur(function(){
			// 获取输入的验证码
			var code = $(this).val().trim();
			// 判断是否为空
			if(code.length < 6) {
				$("#codeTip").text("验证码为6位");
				$("#codeTip").addClass("error");
				// 设置登录按钮为不可用
				$("login").prop("disabled",true);
			} else{
				// 发送ajax
				$.ajax({
					async:true,
					url:"${pageContext.request.contextPath}/RegisterAndLoginServlet",
					type:"GET",
					data:{op:"checkCode",code:code},
					dataType:"text",
					success:function(result,status,xhr){
						if(result=="true"){ // 验证码正确
							$("#codeTip").text("输入正确");
							$("#codeTip").addClass("success");
							// 登录按钮设置可用
							$("#login").prop("disabled",false);
						}else if(result=="false"){ // 验证码不正确
							$("#codeTip").text("输入错误,请重新输入!");
							$("#codeTip").addClass("error");
							// 登录按钮设置不可用
							$("#login").prop("disabled",true);
						}
						
					},
					error:function(xhr,status,error){
						alert("ajax异步请求失败");
					}
				});
			}
			
		});
		
		// 自定义函数
		// 通过cookie中指定的key,获取对应value值
		function getCookie(cname) {

			var name = cname + "="; // name="username="   name="password="

			var ca = document.cookie.split(';');// 根据分号进行字符串的切割,返回一个字符串数组  ca[0]="username=baby"  ca[1]=" password=123456"

			for (var i = 0; i < ca.length; i++) {// 遍历数组

				var c = ca[i].trim(); // ca[0]="username=baby"  ca[1]="password=123456" 

				if (c.indexOf(name) == 0) { // c="username=baby" name="username="  

					return c.substring(name.length, c.length); // 字符串裁剪，得到value值
				}
			}
			return "";
		}
		
		
	})
	
	// 点击验证码自动变换，设置一个时间戳，是每次生成的图片不一致，即不让浏览器读缓存
	function change(img){
		img.src = "${pageContext.request.contextPath}/GetCodeServlet?" + new Date().getTime();
		
	}

</script>


</html>